<template>
  <div class="forum">
    <headers></headers>
    
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1>旅游资讯</h1>
        <p>了解最新旅游动态，获取实用旅行信息</p>
        <div class="search-box">
          <el-input
            v-model="search.title"
            placeholder="搜索资讯..."
            prefix-icon="el-icon-search"
            clearable
            @keyup.enter.native="searchPage"
          >
          </el-input>
          <el-button type="primary" @click="searchPage" icon="el-icon-search">搜索</el-button>
          <el-button @click="resetSearch" icon="el-icon-refresh">清空</el-button>
        </div>
      </div>
    </div>

    <!-- 资讯列表 -->
    <div class="content-section">
      <div class="news-grid">
        <div class="news-card" v-for="(item, index) in tableData" :key="index" @click="toInfo(item.id)">
          <div class="card-content">
            <div class="card-header">
              <span class="card-index">#{{index + 1}}</span>
            </div>
            <h3>{{item.title}}</h3>
            <div class="card-footer">
              <span class="publish-date" v-if="item.createTime">
                <i class="el-icon-time"></i>
                {{new Date(item.createTime).toLocaleDateString()}}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div class="empty-state" v-if="tableData.length === 0">
        <i class="el-icon-news"></i>
        <p>暂无相关资讯</p>
      </div>

      <!-- 分页 -->
      <div class="pagination-container" v-if="tableData.length > 0">
        <el-pagination
          background
          :page-size="search.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <bottoms></bottoms>
  </div>
</template>

<script>
import { getSysForumPage } from '../../api/api'
import headers from '@/components/header'
import bottoms from '@/components/bottom'

export default {
  name: 'Forum',
  components: {
    headers,
    bottoms
  },
  data() {
    return {
      search: {
        title: "",
        pageSize: 12,
        pageNumber: 1,
      },
      total: 100,
      tableData: [],
    }
  },
  methods: {
    searchPage() {
      this.search.pageNumber = 1
      this.getSysForumPage()
    },
    getSysForumPage() {
      getSysForumPage(this.search).then(res => {
        if (res.code == 1000) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    toInfo(id) {
      this.$router.push("/forumInfo?id=" + id)
    },
    handleCurrentChange(val) {
      this.search.pageNumber = val
      this.getSysForumPage()
    },
    resetSearch() {
      this.search.title = "";
      this.search.pageNumber = 1;
      this.getSysForumPage();
    }
  },
  mounted() {
    this.getSysForumPage()
  }
}
</script>

<style scoped>
.forum {
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* 页面头部样式 */
.page-header {
  background: linear-gradient(135deg, #009688 0%, #00796B 100%);
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(0, 150, 136, 0.6) 0%, rgba(0, 121, 107, 0.8) 100%);
  z-index: 0;
}

.header-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 20px;
}

.header-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.header-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* 搜索框样式 */
.search-box {
  display: flex;
  gap: 1rem;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.search-box .el-input {
  width: 400px;
}

.search-box .el-input__inner {
  height: 50px;
  border-radius: 25px;
  padding-left: 20px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.search-box .el-button {
  height: 50px;
  border-radius: 25px;
  padding: 0 30px;
}

/* 内容区域样式 */
.content-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* 新闻网格 */
.news-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

/* 新闻卡片样式 */
.news-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 20px;
  display: flex;
  align-items: center;
}

.news-card:hover {
  transform: translateX(5px);
  background-color: #f8f9fa;
}

.card-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}

.card-header {
  display: flex;
  align-items: center;
}

.card-index {
  font-size: 1.1rem;
  font-weight: 600;
  color: #009688;
  min-width: 40px;
}

.card-content h3 {
  flex: 1;
  font-size: 18px;
  color: #2c3e50;
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
}

.card-footer {
  min-width: 120px;
  text-align: right;
}

.publish-date {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 14px;
}

.publish-date i {
  color: #009688;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
  background: white;
  border-radius: 12px;
  margin-top: 20px;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #ff9800;
}

.empty-state p {
  font-size: 16px;
  margin-bottom: 0;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    height: 200px;
  }

  .header-content h1 {
    font-size: 2rem;
  }

  .header-content p {
    font-size: 1rem;
  }

  .search-box {
    flex-direction: column;
  }

  .search-box .el-input {
    width: 100%;
  }

  .card-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .card-footer {
    text-align: left;
  }

  .news-card {
    padding: 15px;
  }

  .card-content h3 {
    font-size: 16px;
  }
}

/* 动画效果 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.news-card {
  animation: slideIn 0.4s ease-out;
}
</style>